<template>
	<view class="addQQ">
		<view class="flex alignCenter tip">
			<image src="@/static/logo.png" mode="widthFix"></image>
			<view class="font14 color999">一定区分是哪个大学或专业喔！</view>
		</view>
		<view class="schoolAndMajor">
			<uni-mdlist :listData="otherArr" @clickItem="clickItem"></uni-mdlist>
		</view>
		<view class="cardItemBox">
			<view class="flex alignCenter justConBetween cardItem">
				<view class="font14 flex alignCenter"><text class="colorRed">*</text><text>群名称</text></view>
				<view class="flex font14 alignCenter justConEnd">
					<input class="font14" maxlength="30" v-model.trim="name" type="text" placeholder-class="font14" placeholder="请输入(32字符内)">
				</view>
			</view>
			<view class="flex alignCenter justConBetween cardItem">
				<view class="font14 flex alignCenter"><text class="colorRed">*</text><text>群号</text></view>
				<view class="flex font14 alignCenter justConEnd">
					<input class="font14" maxlength="20" v-model.trim="qqNum" type="number" placeholder-class="font14" placeholder="请输入(20字符内)">
				</view>
			</view>
			<view class="flex alignCenter justConBetween cardItem">
				<view class="font14 flex alignCenter"><text class="colorRed">*</text><text>简介</text></view>
				<view class="flex font14 alignCenter justConEnd">
					<input class="font14" maxlength="20" v-model.trim="introduction" type="text" placeholder-class="font14" placeholder="请输入(20字符内)">
				</view>
			</view>
		</view>
		<!-- <view class="cardItem">
			<view class="font14 flex alignCenter title"><text class="colorRed">*</text><text>简介</text></view>
			<view class="font14">
				<textarea class="font14" v-model.trim="introduction" placeholder="简介(20字内)" maxlength="20" placeholder-class="font14" cols="20" rows="5"></textarea>
			</view>
		</view> -->
		<view class="specialCardItem">
			<view class="font14 flex alignCenter"><text class="colorRed">*</text><text>上传二维码</text></view>
			<view class="font14 upload">
				<view class="flex alignCenter">
					<uni-singleimg :fileUrl="fileUrl" v-if="fileUrl" @delPic="delPic"></uni-singleimg>
					<view class="bold uploadCommon colorccc" @click="uploadFileClick">+</view>
				</view>
			</view>
		</view>
		<view class="fixedBottomBtn" @click="toActivityHomePage"><i class="iconfont icon-fabu"></i>确定</view>
		<!-- 选择学校 -->
		<uni-chooseschool v-if="showProvince" :showProvince="showProvince" @schoolSuccess="schoolSuccess" @cancelProvince="showProvince=false"></uni-chooseschool>
		<!-- 选择专业 -->
		<uni-choosemajor v-if="showCollege" :school="otherArr[0].school" :showCollege="showCollege" @majorSuccess="majorSuccess" @cancelColl="showCollege=false"></uni-choosemajor>
	</view>
</template>

<script>
	import { chooseImg,uploadFile,previewImg} from "@/utils/common.js"
	import { addQQ,qqDetail,editQQ } from "@/api/send.js"
	import { money,userName,Integer } from "@/utils/verification.js"
	import uniYearpicker from "@/settingPages/pages/components/uni-yearpicker/uni-yearpicker.vue"
	import uniChoosemajor from "@/settingPages/pages/components/uni-choosemajor/uni-choosemajor.vue"
	export default {
		components:{
			uniYearpicker,
			uniChoosemajor
		},
		data() {
			return {
				fileUrl:'',
				name:'',
				qqNum:'',
				introduction:'',
				otherArr:[{
					title:'大学',
					icon:'/static/image/setting/major.png',
					school:'',
					val:''
				},{
					title:'专业',
					icon:'/static/image/setting/major.png',
					college:'',
					major:'',
					val:''
				}],
				showProvince:false,
				showCollege:false,
				editId:''
			};
		},
		onLoad(option) {
			uni.removeStorageSync('cropUrl')
			this.editId=option.id?option.id:''
			if(this.editId){
				this.getDetail()
			}
		},
		onShow() {
			if(uni.getStorageSync('cropUrl')){
				let path=[uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				uploadFile(path).then((successFile)=>{
					this.fileUrl=successFile.url
				}).catch((err)=>{
					console.log('err',err)
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('cropUrl')
		},
		methods:{
			uploadFileClick(){
				chooseImg(1).then((file)=>{
					uni.navigateTo({
						url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url='+file[0]+'&ratio=1/1'
					})
				})
			},
			// 获取详情
			getDetail(){
				qqDetail({id:this.editId}).then((res)=>{
					if(res.code==100000){
						this.fileUrl=res.data.codeUrl
						this.otherArr[0].school={
							title:res.data.schoolName,
							schoolCode:res.data.schoolCode
						}
						this.otherArr[0].val=res.data.schoolName
						this.otherArr[1].major={
							title:res.data.majorName,
							schoolCode:res.data.majorCode
						}
						this.otherArr[1].val=res.data.majorName
						this.name=res.data.userGroupName
						this.qqNum=res.data.userGroupNo
						this.introduction=res.data.userGroupIntroduction
					}
				})
			},
			// 删除图片
			delPic(){
				this.fileUrl=''
			},
			// 列表功能的点击事件
			clickItem(item){
				if(item.title=='大学'){
					this.showProvince=true
					return
				}else if(item.title=='专业'){
					console.log('专业',this.otherArr[0])
					if(!this.otherArr[0].school){
						uni.showToast({
							icon:'none',
							title:'请先选择学校'
						})
						return
					}
					this.showCollege=true
					return
				}
			},
			// 选择学校后的确定回调事件
			schoolSuccess(item){
				this.showProvince=false
				this.otherArr.forEach((val)=>{
					if(val.title=='大学'){
						val.val=item.school.title
						val.school=item.school
					}else if(val.title=='专业'){
						val.val=''
						val.college=''
						val.major=''
					}
				})
			},
			majorSuccess(item){
				this.showCollege=false
				this.otherArr.forEach((val)=>{
					if(val.title=='专业'){
						val.val=item.major.title
						val.college=item.college
						val.major=item.major
					}
				})
			},
			// 确定
			toActivityHomePage(){
				let canNext=true
				this.otherArr.forEach((item)=>{
					if(!item.val){
						console.log('走不走',item)
						uni.showToast({
							title:`请选择${item.title}`,
							icon:'none'
						})
						canNext=false
						return
					}
				})
				if(!(userName.test(this.name))){
					uni.showToast({
						title:'请输入只包含汉字数字或字母，长度在32字符内的群名',
						icon:'none'
					})
					return
				}else if(!(Integer.test(this.qqNum))){
					uni.showToast({
						title:'请输入20个字符内的纯数字群号',
						icon:'none'
					})
					return
				}else if(!this.introduction){
					uni.showToast({
						title:'请输入简介',
						icon:'none'
					})
					return
				}else if(!this.fileUrl){
					uni.showToast({
						title:'请上传群二维码',
						icon:'none'
					})
					return
				}else{
					if(!canNext) return;
					uni.showLoading({
						title:'提交中',
						mask:true
					})
					let param={
						userGroupName:this.name,
						userGroupNo:this.qqNum,
						userGroupIntroduction:this.introduction,
						schoolCode:this.otherArr[0].school.schoolCode,
						schoolName:this.otherArr[0].school.title,
						majorCode:this.otherArr[1].major.majorCode,
						majorName:this.otherArr[1].major.title,
						codeUrl:this.fileUrl,
					}
					// console.log('param',param)
					if(this.editId){
						param.id=this.editId
						editQQ(param).then((res)=>{
							uni.hideLoading()
							if(res.code==100000){
								uni.navigateBack()
							}
						}).catch((err)=>{uni.hideLoading()})
					}else{
						addQQ(param).then((res)=>{
							uni.hideLoading()
							if(res.code==100000){
								uni.navigateBack()
							}
						}).catch((err)=>{uni.hideLoading()})
					}
				}
			},
		}
	}
</script>
<style lang="scss">
page{
	background-color:$pageBgColor;
}
</style>
<style lang="scss" scoped>
.addQQ{
	padding: 0 30rpx 120rpx;
	box-sizing: border-box;
	.tip{
		padding: 30rpx 80rpx;
		box-sizing: border-box;
		margin:0 0 60rpx 0;
		image{
			width:92rpx;
			height:92rpx;
			margin:0 20rpx 0 0;
		}
	}
	.cardItemBox{
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin:30rpx 0 0;
		border-radius: 10rpx;
		.cardItem{
			padding: 30rpx 0;
			border-bottom: 1px solid $bordercolor;
		}
		.cardItem:last-child{
			border-bottom: none;
		}
	}
	.specialCardItem{
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 30rpx 0;
		.upload{
			margin:30rpx 0 0;
		}
		.title{
			flex-shrink: 0;
		}
		.justConEnd{
			flex:1;
		}
		input{
			width:100%;
			text-align: right;
		}
		textarea{
			margin:30rpx 0 0;
			padding: 15rpx;
			background: $pageBgColor;
			width: 100%;
			height: 150rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
		}
	}
}
</style>
